<template>
    <div class="plan-wrapper">
        <plan-header @open-input="isInputShow = !isInputShow"></plan-header>
        <add-input :is-input-show="isInputShow" @add-item="addItem($event)"></add-input>

        <ul class="todo-list" v-if="todoList.length">
          <plan-item v-for="(item, index) in todoList" :key="index"
            :data="item"
            @complete-item="completeItem($event)"
            @open-check-modal="openCheckModal($event)"
            @open-edit-modal="openEditModal($event)"
            @remove-item="removeItem($event)"
          ></plan-item>
        </ul>
        <no-data-tip v-else />

        <check-modal 
          :is-show-check-modal="isShowCheckModal" 
          :data="currentData" 
          @close-modal="isShowCheckModal = false">
        </check-modal>

        <edit-modal 
          :is-show-edit-modal="isShowEditModal" 
          :data="currentData" 
          @submit-edit="submitEdit(arguments)">
        </edit-modal>  
    </div>
</template>

<script>
import { Toast } from 'mint-ui';
import PlanHeader from './Sub/Header/PlanHeader.vue';
import AddInput from './Sub/AddInput.vue';
import NoDataTip from './Sub/NoDataTip.vue';
import PlanItem from './Sub/PlanItem.vue';
import CheckModal from './Sub/Modal/CheckModal.vue';
import EditModal from './Sub/Modal/EditModal.vue';
import { InsertPlanItemModel, DeletePlanItemModel, GetPlanItemModel, UpdatePlanItemModel, ToggleCompletedStatusModel } from 'models/plan.js';

export default {
    name: 'PlanWrapper',
    components: {
        AddInput,
        PlanHeader,
        NoDataTip,
        PlanItem,
        CheckModal,
        EditModal
    },
     data() {
        return {
            isInputShow: false,
            todoList: [],
            isShowCheckModal: false,
            isShowEditModal: false,
            currentData: {}
        }
    },
    watch: {
        todoList(val) {
            localStorage.setItem('todoData', JSON.stringify(val)) // 监测todoList，有变化，就缓存
        }
    },
    // created() {
    //     this.todoList = JSON.parse(localStorage.getItem('todoData') || '[]') // 此时先从缓存中拿到数据
    // },
    mounted() {
        this.getPlanItems();
    },
    methods: {
        addItem(value) {
            const dataItem = {
                id: new Date().getTime(),
                content: value,
                completed: 0
            };

            const insertPlanItemModel = new InsertPlanItemModel();
            insertPlanItemModel.insertPlanItem(dataItem).then((res) => {
                if (res && res.status === 0) {
                    this.getPlanItems();
                    Toast(res.data.msg);  
                } else {
                    Toast(res.data.msg);
                }
            });
            
            this.isInputShow = false
        },
        getPlanItems() {
            const getPlanItemModel = new GetPlanItemModel();
            getPlanItemModel.getPlanItem().then((res) => {
                if (res && res.status === 0) {
                    this.todoList = res.data;
                } else {
                    Toast(res.data.msg);
                }
            });
        },
        completeItem(id) {
            const toggleCompletedStatusModel = new ToggleCompletedStatusModel();
            toggleCompletedStatusModel.toggleCompletedStatus(id).then((res) => {
                if (res && res.status === 0) {
                    this.getPlanItems();
                } else {
                    Toast(res.data.msg);
                }
            });
        },
        openCheckModal(id) {
            this.currentData = this.todoList.filter(item => item.id === id)[0];
            this.isShowCheckModal = true;
        },
        openEditModal(id) {
            this.currentData = this.todoList.filter(item => item.id === id)[0];
            this.isShowEditModal = true;
        },
        removeItem(id) {
            const deletePlanItemModel = new DeletePlanItemModel();
            deletePlanItemModel.deletePlanItem(id).then((res) => {
                if (res && res.status === 0) {
                    Toast(res.data.msg);
                    this.getPlanItems();
                } else {
                    Toast(res.data.msg);
                }
            });
        },
        submitEdit(args) {
            const newData = args[0],
                oldId = args[1];

            const updatePlanItemModel = new UpdatePlanItemModel();
            updatePlanItemModel.updatePlanItem(newData, oldId).then((res) => {
                if (res && res.status === 0) {
                    Toast(res.data.msg);
                    this.getPlanItems();
                } else {
                    Toast(res.data.msg);
                }
            })

            this.isShowEditModal = false
        }
    }
};
</script>

<style lang="scss" scoped>

</style>
